<template>
  <div class="migrantWorkerDiv" @click="toDetail">
    <div class="top-wrap">
      <div class="justifyBox">
        <div class="jobDiv">{{ migrantWorker.name }}</div>
        <!-- |&nbsp; -->
        <div class="greayText">
          性别：{{ comGender(genderLsit,migrantWorker.gender) }} &nbsp;
          <!-- 工作经验：{{ getExperience(migrantWorker.startWorkMonth) }}年 -->
        </div>
      </div>
      <!-- <div class="experienceDesc">{{ migrantWorker.experienceDesc }}</div> -->
    </div>
    <div class="bom-wrap">
      <div class="companyNameDiv">职业技能：{{ migrantWorker.skill }}</div>
      <!-- <div v-if="migrantWorker.isApply == 1" class="sendBtn2">已申请过</div>
      <div v-if="migrantWorker.isApply == 0" class="sendBtn" @click.stop="apply()">申请简历</div> -->
      <Buttons :buttons="buttons" @apply="apply" @none="''"></Buttons>
      <!-- <div v-if="migrantWorker.status == 2" class="sendBtn2">已通过</div>
      <div v-if="migrantWorker.status == 3" class="sendBtn2">已拒绝</div>
      <div v-if="migrantWorker.status==1" class="sendBtn2">已申请过</div>
      <div v-if="migrantWorker.status == 0 " class="sendBtn" @click.stop="apply">申请简历</div> -->
    </div>
    <!-- <div class="nameDiv">
            {{ migrantWorker.name }} - {{ migrantWorker.skill }}
            <div class="sendBtn" @click="toDetail()">申请简历</div>
        </div>
        <div class="contentDiv">{{migrantWorker.experienceDesc}}</div>
        <div class="migrantWorkerTableDiv">
            <div class="rowDiv headerDiv">
                <div class="cellDiv" style="width: 33.3%">性别</div>
                <div class="cellDiv" style="width: 33.3%">学历</div>
                <div class="cellDiv" style="width: 33.3%; border-right: 0">年龄</div>
            </div>
            <div class="rowDiv">
                <div class="cellDiv" style="width: 33.3%">{{ migrantWorker.genderName }}</div>
                <div class="cellDiv" style="width: 33.3%">{{ migrantWorker.educationName }}</div>
                <div class="cellDiv" style="width: 33.3%; border-right: 0">{{ migrantWorker.age }}</div>
            </div>
        </div> -->
  </div>
</template>

<script>
import { uploadFile } from "@/utils/request.js";
import config from "@/utils/config.js";
import {monthDiff} from '@/utils/util';
import {checkLogin,relogin} from '@/utils/util.js'
export default {
  name: "migrantWoeker",
  props: ["migrantWorker"],
  data() {
    return {
      genderLsit: [],
      buttons: []
    };
  },
  inject: ['showModal'],
  computed:{
    buttons(){
      let btnStyle = [];
      if(this.migrantWorker.status == 2){
        btnStyle.push({text:"已通过",type:"normal",size:"s",method:"none"})
      }else if(this.migrantWorker.status == 3){
        btnStyle.push({text:"已拒绝",type:"normal",size:"s",method:"none"})
      }else if(this.migrantWorker.status == 1){
        btnStyle.push({text:"已申请过",type:"normal",size:"s",method:"none"})
      }else if(this.migrantWorker.status == 0){
        btnStyle.push({text:"申请简历",type:"normal-hover",size:"s",method:"apply"})
      }
      return btnStyle;
    }
  },
  computed:{
    comGender(){
      return function(data){
        if(data && data ==0) {
          return '男'
        } else {
          return '女'
        }
      }
    }
  },
  methods: {
    getExperience(startMonth){
      if(startMonth){
        let experienceYear = monthDiff(new Date(startMonth), new Date())
        if(Number.isInteger(experienceYear)) {
          return experienceYear
        } else {
          return experienceYear.toFixed(1)
        }
      } else {
        return 0
      }
    },
    // 点击申请简历
    apply() {
      if(checkLogin(this)){
        let formData = new FormData();
        formData.append("id", this.migrantWorker.id);
        uploadFile(this, config.api.workerApply, formData).then((res) => {
          if (res.code != "200") return this.$message.warning(res.msg);
          this.showModal('申请简历成功，请耐心等待！', require('@/assets/image/success.png'))
          this.migrantWorker.status = 1;
        });
      }else {
        // console.log('123')
        relogin(this);
      }
      
    },
    toDetail: function (e) {
      console.log("e",e)
      // 阻止冒泡
      if(e.target.nodeName == 'DIV'){
        this.$router.push({
          path: "/help/helpHumanList/helpHumanDetail",
          query: { id: this.migrantWorker.id },
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.migrantWorkerDiv {
  width: 285px;
  height: 100px;
  padding: 14px;
  border: 1px solid #eeeeee;
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.top-wrap {
  width: 100%;
  border-bottom: 1px solid #eee;
}

.top-wrap .justifyBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.top-wrap .experienceDesc {
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-align: left;
}

.top-wrap .justifyBox .jobDiv {
  color: #045db9;
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
  width: 180px;
}
.greayText {
  font-size: 12px;
  color: #999;
}

.bom-wrap {
  padding-top: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.bom-wrap .reason-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-align: left;
}

.bom-wrap .companyNameDiv {
  font-size: 14px;
  color: #666;
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sendBtn {
  display: inline-block;
  background-color: #f1f2f4;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #4177c1;
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
}

.sendBtn2 {
  display: inline-block;
  background-color: #f1f2f4;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #4177c1;
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
}

.sendBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 10px #eeeeee;
  background-color: #045db9;
  transition: all 0.2s ease 0s;
  color: #ffffff;
}

/* .migrantWorkerDiv .nameDiv {
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 5px;
        color: #333;
    }

	.migrantWorkerDiv .nameDiv .sendBtn {
        display: inline-block;
        background-color: #f1f2f4;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #4177c1;
		font-size: 14px;
        font-weight: 500;
		border-radius: 3px;
	}

	.migrantWorkerDiv .nameDiv .sendBtn:hover {
		cursor: pointer;
		box-shadow: 0px 0px 10px #EEEEEE;
		background-color: #045db9;
		transition: all 0.2s ease 0s;
        color: #ffffff;
	}

    .migrantWorkerDiv .contentDiv {
        font-size: 10px;
        color: #999999;
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .migrantWorkerDiv .migrantWorkerTableDiv {
        border: 1px solid #e5ebf3;
        font-size: 10px;
    }

    .migrantWorkerDiv .migrantWorkerTableDiv .rowDiv {
        display: flex;
        justify-content: space-between;
        color: #045db9;
    }

    .migrantWorkerDiv .migrantWorkerTableDiv .rowDiv .cellDiv {
        text-align: center;
        padding: 8px;
        border-right: 1px solid #e5ebf3;
    }

    .migrantWorkerDiv .migrantWorkerTableDiv .headerDiv {
        background-color: #f4fbff;
        color: #333333;
    } */
</style>